<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>罚款历史</title>
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <link rel="icon" href="images/finemanager.png" type="img/x-ico" />
</head>

<body>
  <ul>
    <li><a class="active" href="Manager.html">返回上一页</a></li>
    <li><a href="">查询罚款历史</a></li>
  </ul>

  <div class="box">
    <form >
        <h2>输入书本ID或者读者ID</h2>
        <div class="inputbox">
        <input type="text" id="bookId" size="30">
            <label>书本ID</label>
        </div>
        <div class="inputbox">
        <input type="text" id="userId" size="30">
            <label>读者ID</label>
        </div>
        <input type="reset" value="重置">
        <input type="button" id="sure"  value="查询">
    </form>
  </div>
  <div class="zhezhao" id='zhezhao'>
      <div class="tankuang">
          <div id="header">
              <h2>罚款历史</h2>
              <div id="header-right" onclick="hidder()">x</div>
              <div id="t">
                  <table id="table" class="mytable" border="2" bgcolor="#f0f8ff"></table>
              </div>
          </div>
      </div>
  </div>
</body>

<style>
  body {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    /*设置字体为sans-serif*/
    background-image: url(images/library.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;
    /*背景图片尺寸为覆盖cover*/
  }

  textarea{
    resize: none;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }

  li {
    float: left;
  }

  li a,
  .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  li a:hover,
  .user:hover,
  .dropdown:hover {
    background-color: #111;
    /*鼠标移动时背景颜色*/
  }

  .box {
      position: absolute;
      /*定位方式绝对定位absolute*/
      top: 50%;
      left: 50%;
      /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
      transform: translate(-50%, -50%);
      /*实现块元素百分比下居中*/
      width: 450px;
      padding: 50px;
      background: rgba(0, 0, 0, .8);
      /*背景颜色为黑色，透明度为0.8*/
      box-sizing: border-box;
      /*box-sizing设置盒子模型的解析模式为怪异盒模型，
      将border和padding划归到width范围内*/
      box-shadow: 0px 15px 25px rgba(0, 0, 0, .5);
      /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
      border-radius: 15px;
      /*边框圆角，四个角均为15px*/
  }

  .box h2 {
      margin: 0 0 30px;
      padding: 0;
      color: #fff;
      text-align: center;
      /*文字居中*/
  }

  .box .inputbox {
      position: relative;
  }

  .box .inputbox input {
      width: 100%;
      padding: 10px 0;
      font-size: 16px;
      color: #fff;
      letter-spacing: 1px;
      /*字符间的间距1px*/
      margin-bottom: 30px;
      border: none;
      border-bottom: 1px solid #fff;
      outline: none;
      /*outline用于绘制元素周围的线
      outline：none在这里用途是将输入框的边框的线条使其消失*/
      background: transparent;
      /*背景颜色为透明*/
  }

  .box .inputbox label {
      /*<label> 标签为 input 元素定义标注（标记）*/
      position: absolute;
      top: 0px;
      left: 0px;
      padding: 10px 0;
      font-size: 16px;
      color: #fff;
      pointer-events: none;
      /*鼠标事件消失，比如说选中文字，光标定位，超链接下划线*/
      transition: .5s;
      /*过渡时间5s*/
  }

  /*填完信息后，字体上浮*/
  .box .inputbox input:focus~label,
  .box .inputbox input:valid~label {
      top: -30px;
      left: 0;
      color: #03a9f4;
      font-size: 15px;
  }

  .box input[type="button"] {
      background: transparent;
      border: none;
      outline: none;
      font-size: 16px;
      color: #fff;
      background: #03a9f4;
      padding: 15px 20px;
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
      border-radius: 10px;
      position: relative;
      left: 200px;
  }

  .box input[type="reset"] {
      background: transparent;
      border: none;
      outline: none;
      font-size: 16px;
      color: #fff;
      background: #03a9f4;
      padding: 15px 20px;
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
      border-radius: 10px;
      position: relative;
      left: 0px;
  }

  #t{
      padding-left:13%;
      margin-top: 30px;
      text-align: center;
  }
  mytable {
      width: 500px;
      border: 2px;
      text-align: center;
      border-collapse: collapse;
      background-color: cornsilk;
      padding-left:20%;
      text-align: center;
  }
  .mytable tr {
      width: 100px;
      padding-left:15%;
  }
  .zhezhao{
      position: fixed;
      left: 28%;
      top: 18%;
      background: #000;
      width: 50%;
      height: 50%;
      background: rgba(0,0,0,0.5);
  }
  .tankuang{
      position: relative;
      background: ghostwhite;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      margin: 5% auto;
  }
  #header{
      height: 40px;
      text-align: center;
  }
  #header-right{
      position: absolute;
      width: 25px;
      height: 25px;
      border-radius: 5px;
      background: red;
      color: #fff;
      right: 5px;
      top: 5px;
      text-align: center;
      cursor: pointer;
  }

</style>
<script>
    document.getElementById('zhezhao').style.display="none";
    function hidder(){
        document.getElementById('zhezhao').style.display="none";
    }
    $("#sure").click(function () {
        var borrow={
            bookId:$("#bookId").val(),
            userId:$("#userId").val()
        }
        var html = "<tr><th>借阅ID</th><th>书本ID</th><th>用户ID</th><th>处罚类型</th><th>处罚金额</th><th>处罚状态</th></tr>"
        if(borrow.userId!=""||borrow.bookId!=""){
            document.getElementById('zhezhao').style.display="";
            $.ajax({
                url: "http://localhost:8080/borrow/findFine",
                type: "post",
                dataType: 'json',
                data: JSON.stringify(borrow),
                contentType: "application/json",
                success: function (res) {
                    alert(res.msg)
                    for(var i=0;i<res.data.length;i++){
                        if(res.data[i].punishmentStatus=="N"){
                            html = html+"<tr><td>"+res.data[i].borrowId+"</td><td>"+res.data[i].bookId+"</td><td>"+res.data[i].userId+"</td><td>"+res.data[i].punishmentType+"</td><td>"+res.data[i].punishmentPrice+"</td><td>"+"否"+"</td></tr>"
                        }else {
                            html = html+"<tr><td>"+res.data[i].borrowId+"</td><td>"+res.data[i].bookId+"</td><td>"+res.data[i].userId+"</td><td>"+res.data[i].punishmentType+"</td><td>"+res.data[i].punishmentPrice+"</td><td>"+"是"+"</td></tr>"
                        }

                    }
                    $("#table").html(html)
                },
                error: function (res) {
                    alert("JSON数据获取失败，请联系管理员！");
                }
            })
        }else{
            alert("书本id或读者id不能为空！！")
        }

    });
</script>
</html>
